<template>
    <div class="page codeShow-wrapper">
        <p class="codeShow-title">{{code['code_tag']}} demo源码</p>
        <div class="is-loading" v-if="!code.id">
            <div class="loading">
                <i class="icon-loading iconfont"></i>
            </div>
            <span class="loading-text">loading......</span>
        </div>
        <mavon-editor
                :subfield="false"
                :scrollStyle="true"
                :toolbarsFlag="false"
                defaultOpen="preview"
                :editable="false"
                :ishljs = "true"
                v-model="code.code"
                class="value-wrapper"
                v-if="code.id"/>

    </div>
</template>

<script>
    export default {
        name: 'soundCodeShow',
        data() {
            return {
                code: {
                }
            }
        },
        methods: {
            async getSoundCode() {
                let codeTag = this.$route.fullPath
                let res = await this.$request.get(`/api${codeTag}`)
                if (res.status && res.status === 200) {
                    let data = res.data.data
                    this.code = data
                }
            }
        },
        created() {
            this.getSoundCode()
        }
    }
</script>

<style scoped>
    .codeShow-wrapper {

    }
    .codeShow-wrapper .is-loading {
        display: flex;
        width: 100%;
        height: 80%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .codeShow-wrapper .loading-text {
        color: #333333;
        font-size: .4rem;
        padding: .2rem 0;
    }
    .codeShow-wrapper .codeShow-title {
        padding: .3rem;
        font-size: .6rem;
        color: lightcoral;
    }
    .iconfont {
        font-size: 1rem;
        color: deepskyblue;
    }
    #app .loading {
        display: inline-block;
        transform: translateX(100px);
        animation: loading1 1s linear infinite;
    }
    @keyframes loading1 {
        0% {
            transform: rotateZ(360deg);
        }
        100% {
            transform: rotateZ(0deg);
        }
    }
</style>
